<template>
    <div class="commentbox">
        <a-comment>
            <a-avatar
                    slot="avatar"
                    :src="userInfo.avatar"
                    alt="Han Solo"
            />
            <div slot="content">
                <a-form-item>
                    <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
                </a-form-item>
                <a-form-item>
                    <a-button htmlType="submit" :loading="submitting" @click="handleSubmit" type="primary">
                        添加评论
                    </a-button>
                    <a href="javascript:;" class="file">选择文件
                        <input type="file" multiple="multiple" @change="handleUploadFun">
                    </a>
                    <a-button v-if="showCancle" style="margin-left:5px;"  @click="handleCancle">
                        取消评论
                    </a-button>
                </a-form-item>
            </div>
        </a-comment>
    </div>
</template>
<script>

    export default {
        props: {
            userInfo: {
                type: Object
            },
            replyInfo: {
                type: Object
            },
            showCancle: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                comments: [],
                submitting: false,
                value: '',
            };
        },
        methods: {
            handleSubmit() {
                this.comments = {
                    uid: this.$store.state.id,
                    replyUid: this.replyInfo.replyUid,
                    userName: this.userInfo.userName,
                    avatar: this.userInfo.avatar,
                    content: this.value,
                    reply: []
                }
                this.value = '';
                this.$emit("submit-box", this.comments)
            },
            handleChange(e) {
                this.value = e.target.value;
            },
            handleCancle() {
                this.value = '';
                this.$emit("cancel-box", this.replyInfo.replyUid)
            },
            handleUploadFun(e){
                this.$emit("upload-img", e.target.files)
            }
        },
    };
</script>

<style lang="scss">
    .commentbox{
        .file {
            position: relative;
            display: inline-block;
            background:#1890ff;;;
            border: 1px solid #1890ff;;;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            text-indent: 0;
            line-height: 23px;
            // 加的
            top: 10px;
            margin-left: 10px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #096dd9;;
            border-color: #096dd9;;
            color: #fff;
            text-decoration: none;
        }
    }
</style>
